<template>
    <PageLayout>
        <!-- 页面头部 -->
        <section class="py-12 bg-gradient-to-r from-primary/5 to-secondary/5">
            <div class="container mx-auto px-4 text-center">
                <SectionTitle 
                    title="生活瞬间" 
                    subtitle="记录那些平凡却珍贵的时刻，每一个瞬间都是生活赠予我们的小确幸" 
                />
            </div>
        </section>

        <!-- 筛选和搜索 -->
        <section class="py-6 bg-white/80 backdrop-blur-sm sticky top-0 z-30 border-b border-neutral-200">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row gap-4 items-center justify-between">
                    <!-- 分类筛选 -->
                    <div class="flex gap-2 flex-wrap">
                        <button v-for="category in categories" :key="category.value"
                            @click="selectedCategory = category.value" :class="[
                                'px-4 py-2 rounded-full text-sm transition-colors',
                                selectedCategory === category.value
                                    ? 'bg-primary text-white'
                                    : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
                            ]">
                            {{ category.label }}
                        </button>
                    </div>

                    <!-- 搜索框 -->
                    <div class="relative">
                        <input v-model="searchQuery" type="text" placeholder="搜索瞬间..."
                            class="pl-10 pr-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
                    </div>
                </div>
            </div>
        </section>

        <!-- 瞬间网格 -->
        <section class="py-12">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <MomentCard v-for="moment in filteredMoments" :key="moment.id" :moment="moment"
                        @click="openMomentDetail(moment)" class="cursor-pointer" />
                </div>

                <!-- 加载更多 -->
                <div class="text-center mt-12" v-if="hasMore">
                    <button @click="loadMore" :disabled="loading"
                        class="bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-lg transition-colors disabled:opacity-50">
                        {{ loading ? '加载中...' : '加载更多' }}
                    </button>
                </div>
            </div>
        </section>

        <!-- 瞬间详情弹窗 -->
        <div v-if="selectedMoment" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4"
            @click="closeMomentDetail">
            <div class="bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto" @click.stop>
                <div class="relative">
                    <img :src="selectedMoment.image" :alt="selectedMoment.title"
                        class="w-full h-64 md:h-80 object-cover rounded-t-2xl">
                    <button @click="closeMomentDetail"
                        class="absolute top-4 right-4 w-8 h-8 bg-black/50 text-white rounded-full flex items-center justify-center hover:bg-black/70 transition-colors">
                        <i class="fa fa-times"></i>
                    </button>
                </div>

                <div class="p-6">
                    <h3 class="text-xl font-bold mb-2">{{ selectedMoment.title }}</h3>
                    <p class="text-neutral-600 mb-4">{{ selectedMoment.description }}</p>
                    <div class="flex items-center gap-4 text-sm text-neutral-500">
                        <span><i class="fa fa-calendar mr-1"></i>{{ selectedMoment.date }}</span>
                        <span><i class="fa fa-map-marker mr-1"></i>{{ selectedMoment.location }}</span>
                    </div>
                </div>
            </div>
        </div>
    </PageLayout>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import PageLayout from '@/components/layout/PageLayout.vue'
import MomentCard from '@/components/cards/MomentCard.vue'
import SectionTitle from '@/components/ui/SectionTitle.vue'
import { momentsData } from '@/data/moments.js'

// 响应式数据
const selectedCategory = ref('all')
const searchQuery = ref('')
const selectedMoment = ref(null)
const displayedMoments = ref([])
const loading = ref(false)
const pageSize = 9
const currentPage = ref(1)

// 分类选项
const categories = [
    { label: '全部', value: 'all' },
    { label: '日常', value: 'daily' },
    { label: '旅行', value: 'travel' },
    { label: '美食', value: 'food' },
    { label: '自然', value: 'nature' }
]

// 扩展的瞬间数据
const allMoments = ref([
    ...momentsData,
    // 添加更多数据
    {
        id: 4,
        image: 'https://picsum.photos/id/1015/400/300',
        title: '雨后的街道',
        description: '雨后的石板路反射着路灯的光，安静而美好',
        date: '2023-09-15',
        location: '老城区',
        category: 'daily'
    },
    {
        id: 5,
        image: 'https://picsum.photos/id/1016/400/300',
        title: '山间小径',
        description: '蜿蜒的小径通向远方，每一步都是新的发现',
        date: '2023-09-10',
        location: '青山',
        category: 'travel'
    },
    {
        id: 6,
        image: 'https://picsum.photos/id/1017/400/300',
        title: '手工咖啡',
        description: '慢慢研磨，细细品味，生活需要这样的仪式感',
        date: '2023-09-08',
        location: '家中',
        category: 'food'
    }
])

// 计算属性
const filteredMoments = computed(() => {
    let filtered = allMoments.value

    // 分类筛选
    if (selectedCategory.value !== 'all') {
        filtered = filtered.filter(moment => moment.category === selectedCategory.value)
    }

    // 搜索筛选
    if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        filtered = filtered.filter(moment =>
            moment.title.toLowerCase().includes(query) ||
            moment.description.toLowerCase().includes(query) ||
            moment.location.toLowerCase().includes(query)
        )
    }

    return filtered.slice(0, currentPage.value * pageSize)
})

const hasMore = computed(() => {
    const totalFiltered = allMoments.value.filter(moment => {
        if (selectedCategory.value !== 'all' && moment.category !== selectedCategory.value) {
            return false
        }
        if (searchQuery.value) {
            const query = searchQuery.value.toLowerCase()
            return moment.title.toLowerCase().includes(query) ||
                moment.description.toLowerCase().includes(query) ||
                moment.location.toLowerCase().includes(query)
        }
        return true
    }).length

    return currentPage.value * pageSize < totalFiltered
})

// 方法
const loadMore = () => {
    loading.value = true
    setTimeout(() => {
        currentPage.value++
        loading.value = false
    }, 500)
}

const openMomentDetail = (moment) => {
    selectedMoment.value = moment
    document.body.style.overflow = 'hidden'
}

const closeMomentDetail = () => {
    selectedMoment.value = null
    document.body.style.overflow = 'auto'
}

// 监听分类和搜索变化，重置分页
const resetPagination = () => {
    currentPage.value = 1
}

// 监听器
import { watch } from 'vue'
watch([selectedCategory, searchQuery], resetPagination)

onMounted(() => {
    // 页面加载完成后的初始化
})
</script>